CSS Animation Generator
How to Use:
**Configure Animation:** Adjust properties like **duration**, **delay**, **iteration count**, and choose an **animation type** (e.g., "Grow/Shrink", "Rotate", "Bounce", "Fade", "Slide").
**Live Preview:** Watch the box animate in real-time in the "Preview" section as you change your settings.
**Copy Code:** Once you're satisfied with your design, copy the generated CSS
@keyframes
and
animation
property code to use in your web project.
Animation Properties
Duration (s):
2s
Delay (s):
0s
Iteration Count:
infinite
Direction:
normal
reverse
alternate
alternate-reverse
Timing Function:
ease
linear
ease-in
ease-out
ease-in-out
ease-out-back
Animation Type:
Grow/Shrink
Rotate
Bounce (Vertical)
Fade In/Out
Slide Left/Right
Preview
ANIMATE!
Generated Code
Copy Keyframes
Copy Animation Property